<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/4
  Time: 16:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>景点展示</title>
</head>
<style type="text/css">


    .lbt{
        width: 100%;
        height: 400px;
        overflow: hidden;
    }
    a{
        text-decoration: none;
        color: green;
    }
    p{
        width: 50%;
        height: 25px;
        margin: 0 auto;
    }
    .tupian{
        float: left;
    }
    .fd{float: left;
        width: 100px;
        list-style-type:none;
    }
    a,input{
        cursor:pointer
    }
    .clearfix:after{
        content: "";
        display: block;
        height: 0px;
        clear: both;
        visibility: hidden;
    }
    .clearfix{
        width: 60%;margin: 0 auto;
    }
    .ssk{
        width: 700px; margin: 20px auto;
    }
    .aside_left{width: 90%; height: 34px;}
    .aside_left1{height: 40px; width: 60px;}
    .aside_left2{width: 150px;height: 50px;background:orange; color: white;font-size:25px;}
    .tpzb{width: 100%; height: 200px; border:1px solid #485;margin:10px auto;}
    .zhuti{
        width: 60%;
        margin: 0 auto;
    }
    .daohang{
        font-size: 30px;
    }


    .context{
        margin-left: -240px;
        width: 100%;
    }
    .gg{
        width: 100%;
    }
</style>


<body>
<!-- 轮播图部分 -->
<div class="lbt">
    <a href="">
        <img src="./1.jpg" style="width: 100%">
    </a>
</div>

<!-- 搜索框 -->
<div class="ssk">
    <input class="aside_left" type="text" name="" placeholder="请输入关键字">
    <input class="aside_left1" type="button" data-beacon="" class=""  value="搜索">
</div>
<div style="width: 60%;margin: 0 auto;">
    <h2>景点筛选</h2><hr>
</div>
<!-- 选择区 -->
<div class="zhuti">
    <div class="context">
        <ul class="clearfix" class="gg">
            <li class="fd">地区：</li>&nbsp&nbsp&nbsp&nbsp
            <li class="fd"><a href="">不限</a></li>
            <li class="fd"><a href="">城市</a></li>
        </ul><br>
        <ul class="clearfix" class="gg">
            <li class="fd">主题：</li>&nbsp&nbsp&nbsp&nbsp
            <li class="fd"><a href="">不限</a></li>
            <li class="fd"><a href="">温泉</a></li>
            <li class="fd"><a href="">公园</a></li>
            <li class="fd"><a href="">山川</a></li>
        </ul><br>
        <ul class="clearfix" class="gg">
            <li class="fd">星级：</li>&nbsp&nbsp&nbsp&nbsp
            <li class="fd"><a href="">不限</a></li>
            <li class="fd"><a href="">5A</a></li>
            <li class="fd"><a href="">4A</a></li>
            <li class="fd"><a href="">其他</a></li>
        </ul>
    </div>

</div>
<!-- 旅游景点展示区 -->
<div class="clearfix">
    <div class="tpzb">
        <div class="tupian"><a href=""><img src="./1.jpg" style="width: 200px; height: 200px;"></a></div>
        <div class="tupian" style="width: 60%;height: 200px; margin-left: 20px;">
            <a href="https://www.ly.com/scenery/"><h2>香格里拉</h2></a><br>
            <div style="margin-top: 30px;">
                <span>地址：想嘻嘻嘻嘻嘻嘻嘻嘻aaaaaaaaaaaaaaaaaaaaaa</span><br>
                <span>特色：各种服务各种嗨</span>
            </div>

        </div>
        <div class="tupian" style="margin-top: 40px;">
            <span style="color: red;">￥</span><span style="color: red;font-size:50px;">100</span><span>起</span><br>
            <input class="aside_left2" type="button" name="" value="查看详情">
        </div>
    </div>
</div>
<!-- 轮播图原理 -->
<script type="text/javascript">
    var imgNode=document.getElementsByTagName('img')[0];
    var index=1
    function changepic(){
        imgNode.src="./" + (index++) +".jpg";
        setTimeout(changepic,2000);
        if(index==3){
            index=1;
        }
    }

    changepic();
</script>

</body>
</html>
